<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="w-100 banner" v-if="data.banner_list.length>0&&data.banner_list.length!==undefined">
					<swiper autoplay="true" circular="true" class="w-100 h-100" duration="300" indicatorDots="true" interval="5000"
					 style="height:360upx;">
						<swiper-item v-for="(bitem) in data.banner_list" :key="bitem.id">
							<navigator @click="navigatorClick" :data-open_type="bitem.open_type" :data-url="bitem.page_url" hoverClass="none"
							 :openType="bitem.open_type?bitem.open_type:'navigator'" :url="bitem.page_url">
								<image class="slide-image" mode="aspectFill" :src="bitem.pic_url"></image>
							</navigator>s
						</swiper-item>
					</swiper>
				</view>
				<view class="list">
					<view @click="goToGoods" class="one flex-row" :data-index="gitem.goods_id" v-for="(gitem) in data.goods_list" :key="gitem.id">
						<view class="img flex-x-center flex-grow-0">
							<image mode="aspectFill" :src="gitem.cover_pic"></image>
							<image class="sku" src="/static/icon-bargain-sku.png" v-if="gitem.num==0"></image>
						</view>
						<view class="flex-grow-1 flex-col" style="justify-content:space-between">
							<view>
								<view class="text-more" style="margin-top:6upx;">{{gitem.name}}</view>
								<view class="sale flex-row">
									<view class="flex-grow-0 flex-row" style="margin-right:16upx;">
										<view class="flex-grow-0 avatar" :style="'z-index:'+i" v-for="(user,i) in gitem.user_list" :key="user.id">
											<image :src="user.avatar_url"></image>
										</view>
									</view>
									<view class="flex-grow-1 flex-y-center" v-if="gitem.num>0">{{gitem.sale}}人正在砍价</view>
									<view class="flex-grow-1 flex-y-center" v-else>{{gitem.sale}}人已参与</view>
								</view>
							</view>
							<view class="flex-row">
								<view class="flex-grow-1" style="line-height:1">
									<view style="color:#888;text-decoration:line-through;font-size:9pt">￥{{gitem.price}}</view>
									<view class="flex-row flex-y-bottom" style="color:#ff4544;">
										<view class="flex-grow-0">最低￥</view>
										<view class="flex-grow-0" style="font-size:15pt">{{gitem.min_price}}</view>
									</view>
								</view>
								<view class="flex-grow-0 flex-y-bottom">
									<view class="join-btn flex-x-center flex-y-center" v-if="gitem.num>0">立即参与</view>
									<view class="join-btn flex-x-center flex-y-center no" v-else>下次再来</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<com-naver v-bind="{data:data}"></com-naver>

			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	import comNaver from './../commons/naver/naver.vue';

	var a = !1,
		e = !0;

	export default {
		components: {
			comNaver
		},
		data() {
			return {
				data: {
					p: 1,
					naver: "list",
					banner_list: {}
				},
			};
		},
		onLoad: function(o) {myVue = this;
			myVue.getApp.page.onLoad(this, o);
			var a = this;
			void 0 !== o.order_id && myVue.getApp.core.navigateTo({
				url: "/bargain/activity/activity?order_id=" + o.order_id + "&user_id=" + o.user_id
			}), void 0 !== o.goods_id && myVue.getApp.core.navigateTo({
				url: "/bargain/goods/goods?goods_id=" + o.goods_id + "&user_id=" + o.user_id
			}), this.loadDataFirst(o);
		},
		onReady: function() {
			myVue.getApp.page.onReady(this);
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
		},
		onHide: function() {
			myVue.getApp.page.onHide(this);
		},
		onUnload: function() {
			myVue.getApp.page.onUnload(this);
		},
		onPullDownRefresh: function() {
			this.loadDataFirst({});
		},
		onReachBottom: function() {
			e || this.loadData();
		},
		onShareAppMessage: function() {
			return myVue.getApp.page.onShareAppMessage(this), {
				path: "/bargain/list/list?user_id=" + this.data.__user_info.id,
				success: function(t) {}
			};
		},
		methods: {
			loadDataFirst: function(t) {
				var o = this;
						    o.getApp.core.showLoading({
						        title: "加载中"
						    }),
				o.getApp.request({
					url: o.getApp.api.bargain.index,
					type: "get",
					success: function(t) {
						0 ==
						t.code && (
						o.setData(t.data),
							o.setData({
									p: 2
								},
								), 
								t.data.goods_list.length > 0 && (e = !1));
					},
					complete: function(o) {
						void 0 === t.order_id &&
						myVue.getApp.core.hideLoading(),
						myVue.getApp.core.stopPullDownRefresh();
					}
				});
			},
			loadData: function() {
				var i = this,
					n = i.data.p;
				if (!a) {
							        a = !0,
									 i.getApp.core.showLoading({
							            title: "加载中"
							        });

					i.getApp.request({
						url: i.getApp.bargain.index,
						data: {
							page: n
						},
						success: function(t) {
							console.log("bargain......");
							console.log(t)
							if (0 == t.code) {
								var o = i.data.goods_list;
								var b = i.data.banner_list;
								0 == t.data.goods_list.length && (e = !0), o = o.concat(t.data.goods_list), i.setData({
									goods_list: o,
									p: n + 1,
									banner_list: b
								});
							} else i.showToast({
								title: t.msg
							});
						},
						complete: function(t) {
							i.getApp.core.hideLoading(),
							a = !1;
						}
					});
				}
			},
			goToGoods: function(t) {
				var o = t.currentTarget.dataset.index;
				myVue.getApp.core.navigateTo({
					url: "/bargain/goods/goods?goods_id=" + o
				});
			}
		}
	}
</script>

<style scoped>

	page {
		background-color: #F6F6F6;
	}

	.banner {
		height: 376upx;
		padding-bottom: 16upx;
		background-color: #f7f7f7;
		position: relative;
	}

	.slide-image {
		width: 100%;
		height: 360upx;
	}

	.list {
		width: 100%;
		padding-bottom: 96upx;
	}

	.list .one {
		margin-bottom: 20upx;
		background-color: #fff;
		padding: 24upx;
		border-bottom: 1upx solid #eee;
	}

	.one .img {
		position: relative;
		width: 220upx;
		height: 220upx;
		margin-right: 24upx;
	}

	.one .img image:first-child {
		width: 100%;
		height: 100%;
	}

	.sale {
		margin-top: 10upx;
		font-size: 9pt;
	}

	.img .sku {
		position: absolute;
		top: 0;
		left: 0;
		width: 160upx;
		height: 160upx;
		margin: 30upx;
	}

	.join-btn {
		width: 176upx;
		height: 64upx;
		background-color: #ff5c5c;
		color: #fff;
		border-radius: 32upx;
	}

	.join-btn.no {
		background-color: #cdcdcd;
	}

	.avatar {
		width: 50upx;
		height: 50upx;
		position: relative;
		margin-left: -10upx;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50upx;
	}
</style>
